﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>

<style>
    .layui-card {
        margin: 5px;
    }
    .layui-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .search-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    .search-item {
        display: flex;
        align-items: center;
    }
    .table-container {
        overflow-x: hidden;
    }
    .layui-table-view {
        margin: 0;
    }
</style>

<div class="layui-card">
    <div class="layui-card-header">
        <div class="search-box">
            <div class="search-item">
                <label>订单编码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="orderCode" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="search-item">
                <label>订单名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="orderName" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="search-item">
                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
            <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
        </div>
        <div class="table-container">
            <table id="LAY-app-list" lay-filter="LAY-app-list"></table>
        </div>
        <script type="text/html" id="table-list-toolbar">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                    <i class="layui-icon layui-icon-edit"></i>编辑
                </button>
                <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                    <i class="layui-icon layui-icon-delete"></i>删除
                </button>
            </div>
        </script>
    </div>
</div>

<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table
            , form = layui.form;

        //表格加载
        table.render({
            elem: '#LAY-app-list'
            , url: '/SalesOrder/GetList'
            , method: 'post'
            , contentType: 'application/json'
            , headers: {
                'Content-Type': 'application/json'
            }
            , where: {}
            , request: {
                pageName: 'page'
                , limitName: 'limit'
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
            , cols: [[
                { type: 'checkbox', fixed: 'left', width: 40 }
                , { field: 'orderCode', title: '订单编码', width: 120 }
                , { field: 'orderName', title: '订单名称', width: 120 }
                , { field: 'customerCode', title: '客户编码', width: 120 }
                , { field: 'customerName', title: '客户名称', width: 120 }
                , { field: 'orderDate', title: '订货日期', width: 100, templet: function (d) { return layui.util.toDateString(d.orderDate) } }
                , { field: 'deliveryDate', title: '交货日期', width: 100, templet: function (d) { return layui.util.toDateString(d.deliveryDate) } }
                , { field: 'settlementMethod', title: '结算方式', width: 100 }
                , { field: 'orderCategory', title: '订单类别', width: 100 }
                , { field: 'salesperson', title: '业务员', width: 90 }
                , { field: 'qualityRequirement', title: '质量要求', width: 90 }
                , { field: 'remark', title: '备注', minWidth: 120 }
                , { title: '操作', toolbar: '#table-list-toolbar', width: 160, fixed: 'right' }
            ]]
            , page: true
            , limit: 10
            , height: 'full-180'
        });

        //监听工具条
        table.on('tool(LAY-app-list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除吗？', function (index) {
                    $.ajax({
                        url: '/SalesOrder/Delete?id=' + data.id,
                        type: 'POST',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg(res.msg);
                                obj.del();
                                layer.close(index);
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                location.href = '/SalesOrder/Edit?id=' + data.id;
            }
        });

        //事件
        var active = {
            add: function () {
                location.href = '/SalesOrder/Add';
            }
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听搜索
        form.on('submit(LAY-app-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-app-list', {
                where: field,
                contentType: 'application/json',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
        });
    });
</script>